<template>
  <div class="base-func">
    <!-- 查询按钮 -->
    <div class="func-top">
      <div class="btn-left">
        <slot name="btn" />
        <div v-if="$hasPer('query')" class="group-custom">
          <el-button
            icon="el-icon-search"
            :loading="isRequesting"
            plain
            size="mini"
            type="primary"
            @click="query"
          >
            {{ $t('button.query') }}
          </el-button>
          <el-button plain size="mini" type="primary" @click="visibleClick">
            {{ $t('button.advance') }}
            <i class="el-icon-arrow-down deg-transition" :class="[rArrowClass]" />
          </el-button>
        </div>
        <el-button
          v-if="queryFormEmpty"
          class="btn-custom"
          icon="el-icon-delete"
          size="mini"
          type="warning"
          @click.stop="clearQuery"
        >
          重置查询条件
        </el-button>
      </div>
      <div class="btn-middle">
        <slot name="btn-middle" />
      </div>
      <div class="btn-right">
        <slot name="btn-right" />
      </div>
    </div>

    <!-- 查询具体参数 -->
    <el-drawer
      ref="drawer"
      direction="ttb"
      :modal="false"
      :show-close="false"
      size=""
      :style="{ left: $store.getters['style/getLeftWidth'], top: drawerTop + 'px', right: '5px' }"
      :visible.sync="visibleTmp"
      :with-header="false"
    >
      <slot />
    </el-drawer>
  </div>
</template>
<script>
export default {
  props: {
    isRequesting: {
      default: false,
      type: Boolean
    },
    queryForm: {
      default: () => null,
      type: Object
    },
    visible: {
      default: false,
      type: Boolean
    },
    drawerTop: {
      default: 130,
      type: Number
    }
  },
  data() {
    return {
      intQueryForm: null,
      visibleTmp: false
    }
  },

  computed: {
    // 查询条件是否为空
    queryFormEmpty() {
      return JSON.stringify(this.queryForm) !== JSON.stringify(this.intQueryForm)
    },
    // 抽屉打开返回的类型
    rArrowClass() {
      return this.visible ? 'deg180' : ''
    }
  },

  watch: {
    visible: {
      handler: function() {
        this.visibleTmp = this.visible
      }
    },
    visibleTmp: {
      handler: function() {
        this.$emit('update:visible', this.visibleTmp)
      }
    }
  },

  // deactivated() {
  //   this.$emit('update:visible', false)
  // },
  created() {
    this.visibleTmp = this.visible
    this.intQueryForm = this.$deepCopy(this.queryForm)
  },

  methods: {
    // 触发查询按钮
    query() {
      this.$emit('query')
    },

    // 切换抽屉
    visibleClick() {
      this.visibleTmp = !this.visibleTmp
    },

    // 清空查询条件
    clearQuery() {
      for (const key in this.queryForm) {
        this.queryForm[key] = this.intQueryForm[key]
      }
    }
  }
}
</script>
<style lang="scss">
.func-top {
  // padding-top: 5px;
  height: 40px;
  position: relative;

  .btn-left {
    display: flex;
    float: left;
    flex-wrap: wrap;

    .el-button {
      & + .el-button {
        margin-left: 10px;
      }
    }

    .btn-custom {
      margin-right: 10px;
      margin-bottom: 10px;
    }

    .group-custom {
      margin-right: 10px;
      margin-bottom: 10px;
    }

    .deg-transition {
      transition: transform 0.2s;
    }

    .deg180 {
      transform: rotate(-180deg);
    }
  }
  .btn-middle {
    display: flex;
    float: left;
  }

  .btn-right {
    display: flex;
    float: right;
  }
}
// 解决抽屉在IE兼容性问题(指令IE10以后版本)
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .el-form-item--mini .el-form-item__content,
  .el-form-item--mini .el-form-item__label {
    line-height: 24px;
  }
  .el-drawer__body {
    flex-basis: auto;
  }
}
</style>
